<template>
  <div class="home">
    <van-nav-bar title="更换背景" left-arrow @click-left="onClickLeft" />
    <div class="home-content">
      <van-field
        class="home-content-cell"
        size="large"
        readonly
        clickable
        label="背景位置"
        :value="positionData"
        placeholder="选择背景位置"
        input-align="right"
        @click="showPosition = true"
      />
      <van-field
        class="home-content-cell"
        size="large"
        readonly
        clickable
        label="填充类型"
        :value="fillData"
        placeholder="选择填充类型"
        input-align="right"
        @click="showFill = true"
      />
      <van-popup v-model="showPosition" round position="bottom">
        <van-picker
          title="背景位置"
          show-toolbar
          :columns="positionColumns"
          @confirm="onpositionConfirm"
        />
      </van-popup>
      <van-popup v-model="showFill" round position="bottom">
        <van-picker
          title="填充类型"
          show-toolbar
          :columns="fillColumns"
          @confirm="onfillConfirm"
        />
      </van-popup>
      <van-uploader v-model="file" multiple :max-count="1" />
      <div class="changebg-bottom">
        <van-button round block type="default" @click="changedefault"
          >恢复默认</van-button
        >
        <van-button round block type="warning" @click="changebg"
          >点击更换</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import mqtt from "mqtt";
//import { Toast } from 'vant';
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);

export default {
  //name: 'stepSettings',
  components: {},
  data: function () {
    return {
      file: [],
      Size: 100,
      showFill: false,
      showPosition: false,
      positionColumns: ["居左", "居上", "居右", "居下", "居中"],
      positionData: "居中",
      fillColumns: ["自动", "适应", "填充"],
      fillData: "填充",
      stepShow: false,
      BackgroundCSS: "",
      position: "",
      fill: "",
    };
  },
  methods: {
    onpositionConfirm(value) {
      this.showPosition = false;
      this.positionData = value;
    },
    onfillConfirm(value) {
      this.showFill = false;
      this.fillData = value;
    },
    changedefault() {
        
      this.BackgroundCSS = {
        "background-image": "linear-gradient(-90deg, #29bdd9 0%, #276ace 100%)",
      };
      this.resetSetItem("Background", JSON.stringify(this.BackgroundCSS));
    },
    changebg() {
      if (this.positionData === "居左") {
        this.position = "left";
      } else if (this.positionData === "居右") {
        this.position = "right";
      } else if (this.positionData === "居上") {
        this.position = "top";
      } else if (this.positionData === "居下") {
        this.position = "bottom";
      } else if (this.positionData === "居中") {
        this.position = "center";
      }
      if (this.fillData === "自动") {
        this.fill = "center";
      } else if (this.fillData === "适应") {
        this.fill = "contain";
      } else if (this.fillData === "填充") {
        this.fill = "cover";
      }
      this.BackgroundCSS = {
        "background-image": "url(" + this.file[0].content + ")",
        "background-position": "" + this.position + "",
        "background-size": "" + this.fill + "",
      };
      //console.log(JSON.stringify(this.BackgroundCSS));
      //this.resetSetItem("Background", this.file[0].content);
      this.resetSetItem("Background", JSON.stringify(this.BackgroundCSS));
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.home {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column;

  &-content {
    height: 100%;
    margin: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    transition: 0.3s;
    overflow: auto;
    &-cell {
      margin: 0 0 10px 0;
      width: auto;
      border-radius: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
.van-cell {
   margin: 0 0 10px 0;
    width: auto;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
}
.changebg-bottom {
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom: 50px;
  width: calc(100% - 40px);
}
.van-button {
  margin: 10px;
}
</style>
